<template>
    <el-card style="height: calc(100% - 2px);width: calc(100% - 2px);">
        <el-divider content-position="left">今日推荐</el-divider>
        <ul style="padding-left: 10px">
            <li v-for="(blog,index) in blogs" :key="index" class="ul-li-style">

                <el-button v-if="index==0"   class="button-index" circle style="background: rgb(245, 108, 108)">{{index}}</el-button>
                <el-button v-else-if="index==1"   class="button-index" circle style="background: #FBA315">{{index}}</el-button>
                <el-button v-else-if="index==2"   class="button-index" circle style="background: rgba(238,43,159,0.59)">{{index}}</el-button>
                <el-button v-else type="danger"   class="button-index" circle>{{index}}</el-button>
                <el-link type="info" style="color: #606266;margin-left: 10px" @click="toBlogView(blog.id)">{{blog.title}}</el-link>
                <span style="flex:1"></span>
            </li>
        </ul>

    </el-card>
</template>

<script>
    export default {
        name: "TodayRecommendBlog",
        data(){
            return{
                blogs:[],//今日推荐的博客
            }
        },
        created() {
            this.getBlogs(8);

        },
        methods:{
            //查询所有的博客
            getBlogs(num){
                this.request.get("/index/blog/queryAllBlogs").then(res=>{
                    if (res.code=="200"){
                        for (let i = 0; i < num; i++) {
                            let randomIndex=Math.floor(Math.random() * (res.data.blogs.length ));
                            this.blogs.push(res.data.blogs[randomIndex]);
                        }
                    }
                })
            },
            //跳转到查看博客界面
            toBlogView(id){
                this.$router.push({
                    path: '/frontFramework/blogView',
                    query: {
                        id: id,
                    }
                })
            },
        },
    }
</script>

<style scoped>

    .ul-li-style{
        list-style: none;
        margin-bottom: 10px;
        width: calc(100% - 10px);
        display: flex;

    }

    .button-index{
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(231, 202, 42, 0.82);
        border: 0px;
        color: white;
        cursor: default;
    }




</style>